<template>
  <div>
    <div class="wrap">
      <input type="text" class="form-control" v-model="value">
      <button class="btn" type="button" @click="handleAdd">添加</button>
    </div>

    <Child/>
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';
import Child from './Child.vue'

const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')

const handleAdd = () => {
  list.value.push(value.value)
  value.value = ''
}

provide('list', list.value) // 向子组件提供数据
</script>

<style>
</style>
